<template>
	<div class="page">
		<echart-line id="line" class="echart-component" :dataSource="dataSourceLine"></echart-line>
		<echart-bar id="bar" class="echart-component" :dataSource="dataSourceBar"></echart-bar>
		<echart-pie id="pie" class="echart-component" :dataSource="dataSourcePie"></echart-pie>
	</div>
</template>
  
<script>
import EchartLine from '/@/jqkit/jqkECharts/echartLine.vue';
import EchartBar from '/@/jqkit/jqkECharts/echartBar.vue';
import EchartPie from '/@/jqkit/jqkECharts/echartPie.vue';

import { dataSourceLine, dataSourceBar, dataSourcePie } from '/@/jqkit/jqkECharts/echartTestDataSource';

export default {
	name: 'Page',
	components: {
		EchartLine,
		EchartBar,
		EchartPie,
	},
	data() {
		return {
			dataSourceLine: dataSourceLine,
			dataSourceBar: dataSourceBar,
			dataSourcePie: dataSourcePie
		};
	},
	created() {}
};
</script>
  
<style scoped lang="scss">
.page {
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
	.echart-component {
		width: 80vh;
		height: 60vh;
	}
}
</style>